<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
	  <view class="cu-dialog">
			<view class="goods-data">
				<view class="thumb">
					<image :src="currentItem.pic" mode=""></image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<!--防止提前加载dom-->
						<view v-if="currentItem">
						<text class="max">{{String(currentItem.price).split('.')[0]}}</text>
						<text class="min">.{{String(currentItem.price).split('.')[1]?String(currentItem.price).split('.')[1]:'00'}}</text>
						</view>
					</view>
					<view class="inventory">
						<text>库存：{{currentItem.stock}}</text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list">
					<view class="title">
						<text>选择套装</text>
					</view>
					<view class="size-list">
						<div class="list" v-for="(item,idx) in packList" 
						:class="{'action':currentIndex === idx}"
						@click.stop="onAttrSize(idx)" :key="idx">
							<text>{{item.specName}}</text>
						</div>
					</view>
				</view>
				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<view class="number">
						<text class="iconfont icon-jian"></text>
						<input type="tel" v-model="productCount">
						<text class="iconfont icon-jia"></text>
					</view>
				</view>
			</view>
			<view class="attr-btn">
				<view class="add-cart" v-if="BuyType === 1" @click="addCart">加入购物车</view>
				<view class="add-buy" v-if="BuyType === 1" @click="onConfirm(BuyType)">立即购买</view>
				<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="addCart">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import shopCartItemApi from '@/api/shop-cart-item.js'
	export default {
		data() {
			return {
				isShow: false,
				//初始值
				currentIndex: 0,
				//数量
				productCount:1,
				// 购买类型
				BuyType: 0,
				
			};
		},
		props:{
			packList:{
				type: Array,
				default() {
					return []
				}
			}
		},
		computed:{
			//当前现在的数据
			currentItem:{
				get(){
					 return this.packList[this.currentIndex]
				}
			}
		},
		methods:{
			/**
			 * 显示 
			 * @param {Number} type 1 点击选择 2 加入购物 3 立即购买
			 */
			show(type){
				this.BuyType = type;
				this.isShow = true;
			},
			//添加购物车
			addCart(){
				shopCartItemApi.save({productId:this.currentItem.productId,quantity:this.productCount})
				.then(res=>{
					uni.showToast({
						title:res.msg
					})
					this.hide()
				})
			},
			hide(){
				this.isShow = false;
			},
			onStop(){
				
			},
			/**
			 * 属性选择点击
			 */
			onAttrSize(idx){
				// console.log("idx=>",idx)
				this.currentIndex = idx;
			},
			/**
			 * 确认点击
			 */
			onConfirm(type){
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>
